Skip to content

Comments

Feature/issue 208/add tts to chatbot#212

Merged
yi23484 merged 22 commits intodevfrom
feature/issue-208/add-tts-to-chatbot
Mar 19, 2025
Merged

Feature/issue 208/add tts to chatbot#212
yi23484 merged 22 commits intodevfrom
feature/issue-208/add-tts-to-chatbot

Conversation

@yi23484
Copy link
Contributor

@yi23484 yi23484 commented Mar 8, 2025

Issue(s):

#208

Type of change:

  • New feature

Description:

Added a text-to-speech feature to the chatbot that can read the AI's responses using Web Speech API.

Additional Context:

N/A.

Testing instructions:

Run our solution on localhost, ask the AI something, and press the text-to-speech button to test whether it works.

yi23484 added 9 commits March 8, 2025 14:11
-integrated Web Speech API
-add tts button
-change tts voice to have a British accent
-changed icon of tts button
-changed style of tts button
-fixed icon not loading correctly
-fixed icon not loading correctly
-fixed icon not loading correctly
-fixed icon not loading correctly
@yi23484 yi23484 added the Frontend Issue relates to frontend code. label Mar 8, 2025
@yi23484 yi23484 added this to the Final Release milestone Mar 8, 2025
@yi23484 yi23484 self-assigned this Mar 8, 2025
Copy link
Collaborator

@GerardChabaBristol GerardChabaBristol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's working great, however could you:

  1. Place the text-to-speech button right under the AI's text and change the "Speak" button to an emoji like "🔊" (I provided a screenshot from ChatGPT so you get what I mean).
  2. Change the voice to make it sound more human and if possible speak a bit quicker.
image

yi23484 added 3 commits March 9, 2025 20:04
-Styled the tts button to resemble a speaker icon and placed it below the message
-Styled the tts button to resemble a speaker icon and placed it below the message
-fixed icon not loading correctly
@yi23484
Copy link
Contributor Author

yi23484 commented Mar 10, 2025

I made it speak a bit faster but I don’t think I can make it sound more human, I also added the speaker icon below the messages.

@GerardChabaBristol
Copy link
Collaborator

I made it speak a bit faster but I don’t think I can make it sound more human, I also added the speaker icon below the messages.

Great. Could you also add support for Mandarin and Russian (I believe you just have to edit utterance.lang = "en-UK";)? Regarding changing the voice, it might be worth looking at this GitHub repository.

@yi23484
Copy link
Contributor Author

yi23484 commented Mar 12, 2025

I added support for Chinese and Russian. I also added a more human sounding voice.

@yi23484 yi23484 requested a review from vladislav-k1 March 12, 2025 11:05
@vladislav-k1 vladislav-k1 linked an issue Mar 12, 2025 that may be closed by this pull request
1 task
Copy link
Contributor

@vladislav-k1 vladislav-k1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well, but in the future we should implement a check whether synthesis is supported for every language, e.g. using window.speechSynthesis.getVoices().

Copy link
Collaborator

@GerardChabaBristol GerardChabaBristol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The Frontend CI is failing because you deleted the import line for TypingText. Adding this should fix it: import TypingText from "../components/helpers/TypingText.vue";

  2. This line of code was also deleted and I think it could mess up the real-time response printing:
    <TypingText v-if="msg.sender === 'assistant'" :text="formatMessage(msg.content)" :speed="15" />

Copy link
Contributor

@vladislav-k1 vladislav-k1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't work, can't go further than the login screen.

Copy link
Collaborator

@GerardChabaBristol GerardChabaBristol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm facing a bug where nothing appears on the chat screen after pressing the chat initialization button (screenshot attached).

image

Copy link
Contributor

@vladislav-k1 vladislav-k1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, works well

@yi23484
Copy link
Contributor Author

yi23484 commented Mar 19, 2025

I'm facing a bug where nothing appears on the chat screen after pressing the chat initialization button (screenshot attached).

image

Try deleting local storage and trying again.

Copy link
Contributor

@Siyuan106 Siyuan106 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Text to speech works well!

@yi23484 yi23484 dismissed GerardChabaBristol’s stale review March 19, 2025 09:53

Issue was resolved

@yi23484 yi23484 merged commit 47b92fc into dev Mar 19, 2025
2 checks passed
@yi23484 yi23484 deleted the feature/issue-208/add-tts-to-chatbot branch March 19, 2025 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Frontend Issue relates to frontend code.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Add a text to speech feature to the chatbot

4 participants